<template>
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
        <span>
            <el-select v-model="searchObj.projectCode" filterable clearable class="zs-select-md zs-space-right-sm"
                placeholder="项目名称">
                <el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName"
                    :value="item.projectCode" />
            </el-select>
            <el-select v-model="searchObj.standard" multiple collapse-tags collapse-tags-tooltip clearable filterable
                class="zs-select-md zs-space-right-sm" placeholder="标准">
                <el-option v-for="item in standList" :key="item.standardCode" :label="item.standardName"
                    :value="item.standardCode" />
            </el-select>
            <el-cascader class="zs-select-md zs-space-right-sm" v-model="city" :options="cityList" placeholder="城市"
                :props="cascaderProps" clearable filterable @change="changeCity" />
            <el-button class="zs-btn-plain" @click="search()">
                查询
            </el-button>
        </span>
        <span class="zs-layout-flex-row">
            <div class="db-btn zs-space-right-sm"
                :class="{ 'db-btn-primary': item.manageCode == searchObj.companyAreaManage }" @click="changeTab(item)"
                v-for="(item, index) in manageList" :key="index">
                {{ item.manageName }}
            </div>
        </span>
    </div>
</template>

<script setup>
// import { useRoute } from 'vue-router'
// const route = useRoute().query
import { ref } from 'vue'
import projectListApi from '@/api/Property/projectList'
// import { dateFormat } from '@/utils/number-util'

const props = defineProps({
    menuKey: {
        type: String,
        required: true
    },
    pageKey: {
        type: String,
        required: true
    },
    // type 1 物业汇总 2 物业项目
    type: {
        type: String,
        required: true,
    },
})

let projectList = ref([])
const manageList = ref([{ manageCode: '整体', manageName: '整体' }])
const standList = ref([])

const searchObj = ref({
    companyAreaManage: manageList.value[0].manageCode,

    projectCode: '',
    standard: [],
    city: "",

    menuKey: props.menuKey,
    pageKey: props.pageKey,
})

// 区域
const getManageList = () => {
    projectListApi.queryProjectManageListApi({ menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then((res) => {
        if (res.data.code == 200) {
            manageList.value = manageList.value.concat(res.data.data ? res.data.data : [])
        }
    })
}

// 项目
const getProjectList = () => {
    projectListApi.queryProjectListApi({ companyAreaManage: searchObj.value.companyAreaManage, menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}

// 标准
const getStandList = () => {

    if (props.type == 1) {
        projectListApi.queryAppProjectStandardListApi({ companyAreaManage: searchObj.value.companyAreaManage }).then((res) => {
            if (res.data.code == 200) {
                standList.value = res.data.data
            }
        })
    }

    if (props.type == 2) {
        projectListApi.queryProjectStandardListApi({ companyAreaManage: searchObj.value.companyAreaManage, menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then((res) => {
            if (res.data.code == 200) {
                standList.value = res.data.data
            }
        })
    }

}

// 城市
const cascaderProps = { multiple: false, label: 'label', value: 'value', children: 'children' }
let cityList = ref([])
let city = ref([])
const addrBasicsTree = JSON.parse(localStorage.getItem('addrTree') ?? '[]').list

addrBasicsTree.map(item => {
    const childList = []
    item.childList.map(child => {
        childList.push({ label: child.name, value: child.code })
    })
    cityList.value.push({
        label: item.name,
        value: item.code,
        children: childList
    })
})

const changeTab = (value) => {
    searchObj.value.companyAreaManage = value.manageCode
    getProjectList()
    getStandList()
    searchObj.value.projectCode = ''
    searchObj.value.standard = []
    search()
}

const emit = defineEmits(["onSearch"]);

const changeCity = () => {
    searchObj.value.city = city.value ? city.value[1] : ""
}

const search = () => {
    emit("onSearch", { data: searchObj.value });
}

const init = () => {

    getManageList()
    getProjectList()
    getStandList()

    search()
}
init()


// const biProjectCode = computed(() => {
//     return props.biProjectCode
// });
// watch(biProjectCode, () => {
//     getData()
// }, { deep: true });

</script>

<style scoped lang="scss"></style>
